<template>
  <div id="all">
    <div id="leftBox">
      <div :class="[isCollapse ? '' : 'wOne', 'top']">
        <p>{{ isCollapse?'BPM': "BPM管理系统" }}</p>
        <div>
          <i v-show="isCollapse" class="el-icon-arrow-right" @click="changeIsCollapse"></i>
          <i v-show="!isCollapse" class="el-icon-arrow-left" @click="changeIsCollapse"></i>
        </div>
      </div>
      <div class="people">
        <div v-show="!isCollapse">
          <img src="@/assets/t1.jpg" alt="">
        </div>
        <div :class="[isCollapse ? 'hOne' : '', 'peopleWord']">
          <p>Alex Yang</p>
          <p>财务经理</p>
        </div>
      </div>
      <div class="navMenu">
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" router>
          <!-- <MenuNav :navData="routerDa"></MenuNav> -->
          <el-submenu index="">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">首页</span>
            </template>
            <el-menu-item-group>
              <span slot="title">分组一</span>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div id="rightBox">
      <div class="top">
        <div>
          <p>银桥装饰材料有限公司</p>
        </div>
        <div>
          <img src="@/assets/t1.jpg" alt="">
        </div>
      </div>
      <div class="routerMeta">
        <p>项目控制台</p>
        <!-- <button @click="rData">1111</button> -->
      </div>
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
import { routerData } from '@/util/routerData'
import MenuNav from '@/components/MenuNav.vue'
export default {
  name: 'home',
  components: { MenuNav },
  data () {
    return {
      isCollapse: true,
      routerDa: []
    };
  },
  methods: {
    changeIsCollapse () {
      this.isCollapse = !this.isCollapse
    },
    rData () {
      this.routerDa = routerData()
      console.log('this.routerDa', this.routerDa);
    }

  },
  computed: {
  },
  // watch: {
  //   isCollapse (newVal, old) {
  //     console.log('监听到isCollapse发生了变化', newVal);
  //   }
  // }
  created () {
    this.rData()
  }
}
</script>
<style lang="less" scoped>
#all {
  display: flex;
}

.wOne {
  width: 30rem;
}

.hOne {
  height: 6rem;
}


#leftBox {


  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    height: 10rem;
    background-color: rgb(44, 114, 231);
  }

  .people {
    padding: .5rem 0 0.5rem 0;
    display: flex;
    justify-content: space-around;
    border-bottom: .3rem solid rgb(242, 242, 242);
    height: 8rem;

    :nth-child(1) {
      width: 6rem;
      border-radius: 3rem;

      img {
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
      }
    }

    .peopleWord {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      :nth-child(1) {
        width: 8rem;
        color: rgb(172, 172, 172);
        font-size: 1rem;
      }

      :nth-child(2) {
        font-size: .5rem;
      }
    }
  }
}

#rightBox {
  flex: 1;

  .top {
    background-color: rgb(48, 125, 255);
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 0 4rem;

    :nth-child(1) {
      float: left;
      margin-right: 3rem;
    }

    :nth-child(2) {
      float: left;
    }
  }

  :nth-child(2) {
    width: 8rem;
    height: 8rem;
    border-radius: 4rem;

    img {
      width: 8rem;
      height: 8rem;
      border-radius: 4rem;
    }
  }

  .routerMeta {
    width: 50rem;
    margin-left: 4rem;
    height: 8rem;
    line-height: 8rem;
    font-size: 2rem;
    // border-bottom: .5rem solid rgb(232, 234, 237);
  }


}
</style>